<template>
  <div class="order-content">
    <p>用户订单信息</p>
    <el-descriptions
      class="tab"
      :column="3"
      border
      v-for="(item,index) in order"
      :key="index"
    >
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          用户名
        </template>
        {{ item.username }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          手机号
        </template>
        {{ item.phone }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-sunny"></i>
          状态
        </template>
        {{ item.status=='1'?'已发货':'未发货' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          备注
        </template>
        <el-tag size="small">{{ item.remarks }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          联系地址
        </template>
        {{ item.address }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import { getOrderList } from "@/api";
export default {
  data() {
    return {
      order: []
    }
  },
  mounted() {
    this.orderList();
  },
  methods: {
    async orderList() {
      let res = await getOrderList();
      if (res.status === 200) {
        this.order = res.result;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.order-content {
  padding: 20px;
}
p {
  margin-bottom: 20px;
}
.tab {
  margin-bottom: 10px;
}
</style>
